<template>
  <div class="login-container">
    <div class="login-form">
      <h3 class="login_title">RBAC权限管理系统/注册</h3>
      <el-form :model="registerForm"
               :rules="rules"
               style="margin: 0 15px;"
               v-loading="loading"
               ref="registerForm">
        <el-form-item prop="name">
          <el-input type="text"
                    v-model="registerForm.name"
                    auto-compele="off"
                    placeholder="请输入你的真实姓名"
                    clearable></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input type="text"
                    v-model="registerForm.email"
                    auto-compele="off"
                    placeholder="请输入你的邮箱"
                    clearable></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="text"
                    v-model="registerForm.password"
                    auto-compele="off"
                    placeholder="请设置密码"
                    show-password></el-input>
        </el-form-item>
        <el-form-item prop="checkpwd">
          <el-input type="text"
                    v-model="registerForm.checkpwd"
                    auto-compele="off"
                    placeholder="请确认密码"
                    show-password></el-input>
        </el-form-item>
        <el-form-item>
            <el-form-item prop="code">
              <el-input
                v-model="registerForm.code"
                type="text"
                auto-complete="off"
                placeholder="请输入验证码">
                <template slot="append">
                  <div style="width: 80px;">
                    <el-button @click="sendEmailCode" v-show="isSend" style="color:#409EFF">发送验证码</el-button>
                    <span ref="appendMail"></span>
                  </div>
                </template>
              </el-input>
            </el-form-item>
        </el-form-item>
        <div class="register-text">
          <span @click="goLogin">已有账号，前往登录</span>
        </div>
        <el-form-item style="width: 100%">
          <el-button type="primary"
                     style="width: 100%"
                     @click="submitFrom">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {regster, sendMailCode} from "../../api/auth";
  export default {
    name: 'login',
    data() {
      let checkPwd = (rule, value, callback)=>{
        if(value == '') {
          callback(new Error('请再次输入您的密码'));
        }else if(value !== this.registerForm.password) {
          callback(new Error('两次输入密码不一致'));
        }else {
          callback();
        }
      }
      return {
        rules: {
          name: [{required: true, message: '请输入您的真实姓名', trigger: 'blur'}],
          email: [{required: true, message: '请输入您的邮箱', trigger: 'blur'}, {type:'email', message: '邮箱格式不合法', trigger: 'blur'}],
          password: [{required: true, message: '请输入您的密码', trigger: 'blur'}],
          checkpwd: [{ validator: checkPwd, trigger: ['change', 'blur'] }],
          code: [{required: true, message: '请输入您的邮箱验证码', trigger: 'blur'}]
        },
        isSend: true,
        registerForm: {
          name: '',
          password: '',
          checkpwd: '',
          email: '',
          code: ''
        },
        checked: true,
        loading: false
      }
    },
    methods: {
      submitFrom(){
        this.$refs['registerForm'].validate(valid =>{
          if(valid) {
            regster(this.registerForm).then(res=> {
              if(res.data.code === 200) {
                this.$message.success('注册成功');
                location.reload();
              }else {
                this.$message.error(res.data.message)
              }
            })
          }
        })
      },
      sendEmailCode() {
        this.$refs['registerForm'].validateField('email', (errorMsg)=>{
          if(errorMsg) {
            console.log('邮箱格式不合法')
          }else {
            sendMailCode(this.registerForm.email).then(res=>{
              if(res.data.code === 200) {
                let time = 180;
                let flag = setInterval(()=>{
                  if(time) this.isSend = false;
                  this.$refs.appendMail.innerText = `重新发送(${--time})`;
                  if(time < 0) {
                    clearInterval(flag);
                    this.$refs.appendMail.innerHTML = ''
                    this.isSend = true;
                  }
                }, 1000)
              }
            })
          }
        })

      },
      goLogin() {
        this.$router.push('/login')
      }
    }
  };
</script>

<style scoped lang="scss">
  .login-container {
    background-image: url('../../assets/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .login-form{
    width: 350px;
    border-radius: 10px;
    background-clip: padding-box;
    margin: 80px auto;
    padding: 50px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 35px #cac6c6;
  }
  .login_title{
    margin-bottom: 20px;
    color: rgba(27,27,27,0.7)
  }
  .login_remember{
    margin-bottom: 20px;
    text-align: center;
  }
  .register-text {
    margin-bottom: 15px;
    text-align: right;
    span {
      font-size: 14px;
      color: #409EFF;
      cursor: pointer;
    }
  }
</style>
